<template>
  <div class="ent-tree" ref="ent-tree"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    treeChartData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    treeChartData: {
      handler(val) {
        if (val.length) {
          this.$nextTick(() => {
            this.renderTree();
            window.onresize = () => {
              this.$nextTick(() => {
                this.Echarts.resize();
              });
            };
          });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      Echarts: null,
    };
  },
  methods: {
    // 绘制企业结构的echarts
    renderTree() {
      this.Echarts = echarts.init(this.$refs["ent-tree"]);

      const options = {
        tooltip: {
          // 提示框浮层设置
          trigger: "item",
          triggerOn: "mousemove", // 提示框触发条件
        },
        series: [
          {
            type: "tree",
            data: this.treeChartData,
            name: "树图",
            layout: "orthogonal", // 树图的布局，正交orthogonal和径向radial两种
            orient: "TB", // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
            edgeShape: "curve", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
            roam: true, //是否开启平游或缩放  // 是否开启鼠标缩放或平移，默认false
            zoom: 0.9,
            // scaleLimit: {
            //   //滚轮缩放的极限控制
            //   min: 0.5,
            //   max: 1,
            // },
            symbol: "none", // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
            // symbolRotate: 180, // 配合arrow图形使用效果较好
            symbolSize: 0, // 大于0时是圆圈，等于0时不展示，标记的大小
            itemStyle: {
              // 树图中每个节点的样式
              color: "#f00", // 节点未展开时的填充色
              // borderWidth: 1, // 描边线宽，为0时无描边
              // borderType: 'dotted', // 描边类型
              // borderCap: "round", // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
              // shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
              // shadowBlur: 16, // 图形阴影的模糊大小
              // opacity: 1 // 图形透明度
            },
            label: {
              // 每个节点对应的文本标签样式
              show: true, // 是否显示标签
              distance: 8, // 文本距离图形元素的距离
              position: ["50%", "50%"], // 标签位置
              verticalAlign: "middle", // 文字垂直对齐方式，默认自动，top，middle，bottom
              align: "center", // 文字水平对齐方式，默认自动，left，right，center
              fontSize: 14, // 字体大小
              color: "#fff", // 字体颜色
              backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#CDDBEC" },
                { offset: 0.02, color: "#CDDBEC" },
                { offset: 0.02, color: "#0649A1" },
                { offset: 1, color: "#0649A1" },
              ]), // 文字块的背景颜色
              borderColor: "#f00", // 文字块边框颜色
              borderWidth: 0, // 文字块边框宽度
              borderType: "solid", // 文字块边框描边类型 solid dashed dotted
              borderRadius: 2, // 文字块的圆角
              padding: [10, 12], // 文字块内边距
              // height: 130,
              // width: 12,
              // rotate: -90,
              // 文字超出宽度是否截断或者换行；只有配置width时有效
              // overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
              // ellipsis: '...',
              //   formatter: (params) => {
              //     let newName = "";
              //     let len = params.data.name.length;
              //     let strLen = params.data.relationType === 0 ? 100 : 1; //一行显示几个字
              //     let rowNum = Math.ceil(len / strLen);
              //     if (len > strLen) {
              //       for (let p = 0; p < rowNum; p++) {
              //         let tempStr = "";
              //         let start = p * strLen;
              //         let end = start + strLen;
              //         if (p == rowNum - 1) {
              //           tempStr = params.data.name.substring(start, len);
              //         } else {
              //           tempStr = params.data.name.substring(start, end) + "\n";
              //         }
              //         newName += tempStr;
              //       }
              //     } else {
              //       newName = params.data.name;
              //     }
              //     let n = newName;
              //     let isMain = params.data.relationType === 0;
              //     if (!isMain) {
              //       // length不是指多少个字，1文字=2
              //       if (n.length > 6) {
              //         n = n.slice(0, 6) + "...";
              //       }
              //     }
              //     let str = `{name|${n}}`;
              //     return str;
              //   },
              //   rich: {
              //     name: {
              //       fontSize: 16,
              //     },
              //   },
            },
            labelLayout: {
              dy: -20,
              verticalAlign: "top",
            },
            lineStyle: {
              color: "#21569E", // 树图边的颜色
              width: 1, // 树图边的宽度
            },
            blur: {
              // 淡出状态的相关配置，开启emphasis.focus后有效
              itemStyle: {}, // 节点的样式
              lineStyle: {}, // 树图边的样式
              label: {}, // 淡出标签的文本样式
            },
            leaves: {
              // 叶子节点的特殊配置
              label: {
                // 叶子节点的文本标签样式
                distance: 0,
                position: "bottom",
                verticalAlign: "middle",
              },
              itemStyle: {}, // 叶子节点的样式
              emphasis: {}, // 叶子节点高亮状态的配置
              blur: {}, // 叶子节点淡出状态的配置
              select: {}, // 叶子节点选中状态的配置
            },
            animation: true, // 是否开启动画
            expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
            animationDuration: 550, // 初始动画的时长
            animationEasing: "linear", // 初始动画的缓动效果
            animationDelay: 0, // 初始动画的延迟
            animationDurationUpdate: 750, // 数据更新动画的时长
            animationEasingUpdate: "cubicInOut", // 数据更新动画的缓动效果
            animationDelayUpdate: 0, // 数据更新动画的延迟
          },
        ],
      };
      this.Echarts.setOption(options, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.ent-tree {
  width: 100%;
  height: 100%;
}
</style>
